<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 20px;">
            <el-tab-pane label="基本信息" name="first">
                <div class="content">
                    <div class="jc">
                        <span>姓名</span><br>
                        <span><a>*&nbsp;</a>身份证号</span><br>
                        <span><a>*&nbsp;</a>邮箱</span><br>
                        <span><a>*&nbsp;</a>工作单位</span><br>
                        <span><a>*&nbsp;</a>通讯地址</span><br>
                    </div>
                    <div class="xx">
                        <table>
                            <tr>
                                <td><input placeholder="请输入姓名" v-model="formDatapor.j_name" class="border"></input></td>
                            </tr>
                            <tr>
                                <td><input placeholder="请输入身份证号" v-model="formDatapor.j_identity"
                                        class="border"></input>
                                </td>
                            </tr>
                            <tr>
                                <td><input placeholder="请输入邮箱" v-model="formDatapor.email" class="border"></input></td>
                            </tr>
                            <tr>
                                <td><input placeholder="请输入工作单位" v-model="formDatapor.j_unit" class="border"></input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <!-- <div class="app-container" style="height: 35px; "> -->
                                    <el-cascader size="large" :options="pcaTextArr" v-model="selectedOptions" clearable>
                                    </el-cascader>
                                    <!-- </div> -->
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="jcr">
                        <span><a>*&nbsp;</a>性别</span><br>
                        <span><a>*&nbsp;</a>手机号</span><br>
                        <span><a>*&nbsp;</a>健康状况</span><br>
                        <span><a>*&nbsp;</a>是否退休</span><br>
                    </div>
                    <div class="tt">
                        <table>
                            <tr>
                                <td><el-radio v-model="formDatapor.j_sex" label="1">男</el-radio>
                                    <el-radio v-model="formDatapor.j_sex" label="2">女</el-radio>
                                </td>
                            </tr>
                            <tr>
                                <td><input placeholder="请输入手机号" v-model="formDatapor.j_phone" class="border"></input>
                                </td>
                            </tr>
                            <tr>
                                <td><input placeholder="请输入健康状态" v-model="formDatapor.j_state" class="border"></input>
                                </td>
                            </tr>
                            <tr>
                                <td><el-radio v-model="formDatapor.j_retire" label="1">是</el-radio>
                                    <el-radio v-model="formDatapor.j_retire" label="2">否</el-radio>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                        </table>
                    </div>
                </div>
                <br>
                <span style="font-weight: bold; font-size: 14px; margin-left: 15px;">银行信息</span>
                <el-divider content-position="left" class="custom-divider"></el-divider>
                <div class="content">
                    <div class="jc01">
                        <span><a>*&nbsp;</a>银行卡号</span><br>
                    </div>
                    <div class="xx01">
                        <table>
                            <tr>
                                <td><input placeholder="请输入银行卡号" v-model="formDatapor.j_card" class="border"></input>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="jcr01">
                        <span><a>*&nbsp;</a>开户行</span><br>
                    </div>
                    <div class="tt01">
                        <table>
                            <tr>
                                <td><input placeholder="请输入开户行" v-model="formDatapor.j_bank" class="border"></input>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <br>
                <span style="font-weight: bold; font-size: 14px; margin-left: 15px;">证照</span>
                <el-divider content-position="left" class="custom-divider"></el-divider>
                <div class="content">
                    <div class="jc02">
                        <span><a>*&nbsp;</a>身份证</span><br>
                    </div>
                    <div class="xx02">
                        <table>
                            <tr>
                                <td>
                                    <!--这里上传成功后会绑定文件名到formData.fileName字段传给后端的新增接口，uploadDeviceFile定义上传请求， :before-upload是上传前的回调，用于文件格式校验 -->
                                    <el-upload class="upload-demo" action="#" :http-request="uploadDeviceFile"
                                        :before-upload="uploadFileFun" :file-list="formData.fileList"
                                        :on-remove="handleRemoveFile" :show-file-list="true">
                                        <el-button slot="trigger" type="primary">上传文件</el-button> <!-- 使用按钮触发上传 -->
                                    </el-upload>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="jcr02">
                        <span><a>*&nbsp;</a>证件照</span><br>
                    </div>
                    <div class="tt02">
                        <table>
                            <tr>
                                <td>
                                    <el-upload class="upload-demo" action="#" :http-request="uploadDeviceFilepor"
                                        :before-upload="uploadFileFun" :file-list="formData.fileLists"
                                        :on-remove="handleRemoveFile" :show-file-list="true">
                                        <el-button slot="trigger" type="primary">上传文件</el-button> <!-- 使用按钮触发上传 -->
                                    </el-upload>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <br><br><br>
                <div class="button-container">
                    <button class="submit" @click="fordata">提交</button>
                    <button class="cancel">取消</button>
                </div>
            </el-tab-pane>
            <!-- 共享的按钮组 -->

            <el-tab-pane label="任职经历" name="second">
                <el-button type="primary" style="margin-bottom: 20px; margin-left: 10px; width: 80px;"
                    @click="openAddDialog">添加</el-button>
                <el-table :data="tablell" stripe style="width: 95%" class="zjb">
                    <el-table-column label="序号" width="170" align="center">
                        <template slot-scope="scope">
                            {{ scope.$index + 1 }} <!-- 自增序号 -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="unit" label="单位名称" width="180" align="center">
                    </el-table-column>
                    <el-table-column prop="time" label="入职时间" width="180" align="center">
                    </el-table-column>
                    <el-table-column prop="q_office" label="职务" width="200" align="center">
                    </el-table-column>
                    <el-table-column prop="specialized" label="专业" width="200" align="center">
                    </el-table-column>
                    
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="培训教育" name="third">
                <el-button type="primary" style="margin-bottom: 20px; margin-left: 10px; width: 80px;"
                    @click="openAddDiats">添加</el-button>
                <br>
                <span style="font-weight: bold; font-size: 14px; margin-left: 15px;">教育经历</span>
                <el-divider content-position="left" class="custom-divider"></el-divider>
                <el-table :data="tablecc" stripe style="width: 95%" class="zjb">
                    <el-table-column label="序号" width="150" align="center">
                        <template slot-scope="scope">
                            {{ scope.$index + 1 }} <!-- 自增序号 -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="r_school" label="毕业院校" width="150" align="center">
                    </el-table-column>
                    <el-table-column prop="specialized" label="专业" width="150" align="center">
                    </el-table-column>
                    <el-table-column prop="r_degree" label="学历" width="150" align="center">
                    </el-table-column>
                    <el-table-column prop="r_enrollment_time" label="入学时间" width="180" align="center">
                    </el-table-column>
                    <el-table-column prop="r_graduation_time" label="毕业时间" width="180" align="center">
                    </el-table-column>
                    
                </el-table>
                <br>
                <el-button type="primary" style="margin-bottom: 20px; margin-left: 10px; width: 80px;"
                    @click="openmmDiats">添加</el-button>
                <br>
                <span style="font-weight: bold; font-size: 14px; margin-left: 15px;">培训经历</span>
                <el-divider content-position="left" class="custom-divider"></el-divider>
                <el-table :data="tabledd" stripe style="width: 95%" class="zjb">
                    <el-table-column label="序号" width="170" align="center">
                        <template slot-scope="scope">
                            {{ scope.$index + 1 }} <!-- 自增序号 -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="l_training" label="培训机构" width="180" align="center">
                    </el-table-column>
                    <el-table-column prop="l_specialized" label="培训专业" width="180" align="center">
                    </el-table-column>
                    <el-table-column prop="l_start_date" label="培训开始时间" width="200" align="center">
                    </el-table-column>
                    <el-table-column prop="l_end_date" label="培训结束时间" width="200" align="center">
                    </el-table-column>
                    
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="职业职称" name="fourth">
                <el-button type="primary" style="margin-bottom: 20px; margin-left: 10px; width: 80px;"
                    @click="openmmDiapl">添加</el-button>
                <br>
                <span style="font-weight: bold; font-size: 14px; margin-left: 15px;">职业资格</span>
                <el-divider content-position="left" class="custom-divider"></el-divider>
                <el-table :data="tableee" stripe style="width: 95%" class="zjb">
                    <el-table-column label="序号" width="150" align="center">
                        <template slot-scope="scope">
                            {{ scope.$index + 1 }} <!-- 自增序号 -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="n_certificate" label="职业资格证书" width="140" align="center">
                    </el-table-column>
                    <el-table-column prop="n_acquire_date" label="取得时间" width="170" align="center">
                    </el-table-column>
                    <el-table-column prop="n_code" label="证书编号" width="170" align="center">
                    </el-table-column>
                    <el-table-column prop="n_institution" label="颁发机构" width="160" align="center">
                    </el-table-column>
                    <el-table-column prop="n_expiration_date" label="有效期" width="170" align="center">
                    </el-table-column>
                    
                </el-table>
                <br>
                <el-button type="primary" style="margin-bottom: 20px; margin-left: 10px; width: 80px;"
                    @click="openmmnnmnm">添加</el-button>
                <br>
                <span style="font-weight: bold; font-size: 14px; margin-left: 15px;">职业信息</span>
                <el-divider content-position="left" class="custom-divider"></el-divider>
                <el-table :data="tableff" stripe style="width: 95%" class="zjb">
                    <el-table-column label="序号" width="150" align="center">
                        <template slot-scope="scope">
                            {{ scope.$index + 1 }} <!-- 自增序号 -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="m_name" label="证书名称" width="140" align="center">
                    </el-table-column>
                    <el-table-column prop="m_code" label="证书编号" width="140" align="center">
                    </el-table-column>
                    <el-table-column prop="m_job" label="职称" width="180" align="center">
                    </el-table-column>
                    <el-table-column prop="m_institution" label="颁发机构" width="180" align="center">
                    </el-table-column>
                    <el-table-column prop="m_get_date" label="获得时间" width="180" align="center">
                    </el-table-column>
                </el-table>
            </el-tab-pane>

        </el-tabs>


        <el-dialog title="添加任职经历" :visible.sync="dialogVisible" style="width: 1300px;">
            <el-form :model="formecuse" ref="form">
                <el-form-item label="单位名称" required style="margin-left: 50px;">
                    <el-input v-model="formecuse.unit" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="入职时间" required style="margin-left: 50px;">
                    <div class="block">
                        <el-date-picker v-model="formecuse.time" type="date" placeholder="选择日期" style="width: 300px;">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="职务" required style="margin-left: 50px;">
                    <el-input v-model="formecuse.specialized" style="width: 300px; margin-left: 25px;"></el-input>
                </el-form-item>
                <el-form-item label="专业" required style="margin-left: 50px;">
                    <el-input v-model="formecuse.q_office" style="width: 300px; margin-left: 25px;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="addExperience">确定</el-button>
            </div>
        </el-dialog>


        <el-dialog title="添加教育经历" :visible.sync="dialogopop" style="width: 1300px;">
            <el-form :model="fromada" ref="form">
                <el-form-item label="毕业院校" required style="margin-left: 50px;">
                    <el-input v-model="fromada.r_school" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="专业" required style="margin-left: 50px;">
                    <el-input v-model="fromada.specialized" style="margin-left: 25px; width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="学历" required style="margin-left: 50px;">
                    <el-input v-model="fromada.r_degree" style="width: 300px; margin-left: 25px;"></el-input>
                </el-form-item>
                <el-form-item label="入学时间" required style="margin-left: 50px;">
                    <div class="block">
                        <el-date-picker v-model="fromada.r_enrollment_time" type="date" placeholder="选择日期" style="width: 300px;">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="毕业时间" required style="margin-left: 50px;">
                    <div class="block">
                        <el-date-picker v-model="fromada.r_graduation_time" type="date" placeholder="选择日期" style="width: 300px;">
                        </el-date-picker>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="closeDiaopop">取 消</el-button>
                <el-button type="primary" @click="addeducate">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="添加培训经历" :visible.sync="dialogop" style="width: 1300px;">
            <el-form :model="fromfrt" ref="form">
                <el-form-item label="培训机构" required style="margin-left: 50px;">
                    <el-input v-model="fromfrt.l_training" style="margin-left: 25px; width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="培训专业" required style="margin-left: 50px;">
                    <el-input v-model="fromfrt.l_specialized" style="margin-left: 25px; width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="培训开始时间" required style="margin-left: 50px;">
                    <div class="block">
                        <el-date-picker v-model="fromfrt.l_start_date" type="date" placeholder="选择日期" style="width: 300px;">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="培训结束时间" required style="margin-left: 50px;">
                    <div class="block">
                        <el-date-picker v-model="fromfrt.l_end_date" type="date" placeholder="选择日期" style="width: 300px;">
                        </el-date-picker>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="closeDiaop">取 消</el-button>
                <el-button type="primary" @click="addtraining">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="添加职业资格" :visible.sync="dialogopsd" style="width: 1300px;">
            <el-form :model="fromyou" ref="form">
                <el-form-item label="职业资格证书" required style="margin-left: 50px;">
                    <el-input v-model="fromyou.n_certificate" style=" width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="取得时间" required style="margin-left: 50px;">
                    <div class="block">
                        <el-date-picker v-model="fromyou.n_acquire_date" type="date" placeholder="选择日期"
                            style="margin-left: 25px; width: 300px;">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="证书编号" required style="margin-left: 50px;">
                    <el-input v-model="fromyou.n_code" style="margin-left: 25px; width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="颁发机构" required style="margin-left: 50px;">
                    <el-input v-model="fromyou.n_institution" style="margin-left: 25px; width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="有效期" required style="margin-left: 50px;">
                    <div class="block">
                        <el-date-picker v-model="fromyou.n_expiration_date" type="date" placeholder="选择日期"
                            style="margin-left: 40px; width: 300px;">
                        </el-date-picker>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="closeDiaopas">取 消</el-button>
                <el-button type="primary" @click="addoccupation">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="添加职业信息" :visible.sync="dialogoppoiu" style="width: 1300px;">
            <el-form :model="fromjkl" ref="form">
                <el-form-item label="证书名称" required style="margin-left: 50px;">
                    <el-input v-model="fromjkl.m_name" style="margin-left:10px; width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="证书编号" required style="margin-left: 50px;">
                    <el-input v-model="fromjkl.m_code" style="margin-left: 10px; width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="职称" required style="margin-left: 50px;">
                    <el-input v-model="fromjkl.m_job" style="margin-left: 38px; width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="颁发机构" required style="margin-left: 50px;">
                    <el-input v-model="fromjkl.m_institution" style="margin-left: 10px; width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="获得时间" required style="margin-left: 50px;">
                    <div class="block">
                        <el-date-picker v-model="fromjkl.m_get_date" type="date" placeholder="选择日期"
                            style="margin-left: 10px; width: 300px;">
                        </el-date-picker>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="closeDiaujas">取 消</el-button>
                <el-button type="primary" @click="addjob">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { inserting,inserperience,inserducate,insertraining,inseroccupation,inserjob } from "@/api/expert/expertdata.js"
import { uplodaBudgetFile } from "@/api/system/purchase.js"
import { pcaTextArr } from 'element-china-area-data'
import { debounce } from 'lodash';
import { selectlist01, selectlist02, selectlist03, selectlist04, selectlist05} from '@/api/expert/expertdata.js'
export default {
    data() {
        return {
            isSubmitting: false, // 防止重复提交的状态
            expertext: "",// 保存专家ID
            pcaTextArr,
            selectedOptions: [], // 假设这是您选择的地址选项
            radio: '',
            activeName: 'first',
            table01: [], 
            tablell: [], // 任职经历的数据
            tablecc: [], // 教育经历的数据
            tabledd: [], // 培训经历的数据
            tableee: [], // 职业资格的数据
            tableff: [], // 职称信息的数据
            dialogVisible: false, // 对话框的可见性
            dialogopop: false,
            dialogop: false,
            dialogopsd: false,
            dialogoppoiu: false,
            //职称信息
            fromjkl:{
                m_name:"",
                m_code:"",
                m_job:"",
                m_institution:"",
                m_get_date:"",
                jid:0
            },
            //职业资格信息
            fromyou:{
                n_certificate:"",
                n_acquire_date:"",
                n_code:"",
                n_institution:"",
                n_expiration_date:"",
                jid:0
            },
            //培训经历信息
            fromfrt:{
                l_training:"",
                l_specialized:"",
                l_start_date:"",
                l_end_date:"",
                jid:0
            },
            //教育经历信息
            fromada:{
                r_school:"",
                specialized:"",
                r_degree:"",
                r_enrollment_time:"",
                r_graduation_time:"",
                jid:0
            },
            //任职经历信息
            formecuse: {
                unit: "",
                time: "",
                q_office: "",
                specialized: "",
                jid: 0,
            },
            //基本信息
            formDatapor: {
                j_name: "",
                j_identity: "",
                email: "",
                j_unit: "",
                j_address: "",
                j_sex: "",
                j_phone: "",
                j_state: "",
                j_retire: "",
                j_identity_photo: "",
                j_documents_photo: ""
            },
            formData: {
                fileList: [],
                fileLists: []
            },
            newExperience: { // 用于添加新的任职经历的对象
                unit: '',
                time: '',
                specialized: '',
                q_office: ''
            },

        }
    },
    created() {
        // 确保在组件创建时，防抖方法能够正确绑定到 this
        this.fordata = this.fordata.bind(this); // 绑定 this 以确保上下文正确
    },
    methods: {
        //职称信息添加
        addjob(){
            this.expertext = this.fromjkl.jid;
            inserjob(this.fromjkl).then(response=>{
                if(response==1){  
                    this.$message.success('添加成功')
                    this.queryAddjobData();
                }else{
                    this.$message.success('添加失败')
                }
            })
        },
        //职业资格添加
        addoccupation(){
            this.expertext = this.fromyou.jid;
            inseroccupation(this.fromyou).then(response=>{
                if(response==1){  
                    this.$message.success('添加成功')
                    this.queryAddoccupationData();
                }else{
                    this.$message.success('添加失败')
                }
            })
        },
        //培训经历添加
        addtraining(){
            this.fromfrt.jid  = this.expertext;
            insertraining(this.fromfrt).then(response=>{
                if(response==1){  
                    this.$message.success('添加成功')
                    this.queryAddtrainingData();
                }else{
                    this.$message.success('添加失败')
                }
            })
        },
        //教育经历添加
        addeducate(){
            this.fromada.jid=this.expertext;
            inserducate(this.fromada).then(response=>{
                if(response==1){  
                    this.$message.success('添加成功')
                    this.queryAddeducateData();
                }else{
                    this.$message.success('添加失败')
                }
            })
        },
        //任职信息添加
        addExperience(){
             this.formecuse.jid=this.expertext;
            inserperience(this.formecuse).then(response=>{
                if(response==1){  
                    this.$message.success('添加成功')
                    this.queryExperienceData();
                }else{
                    this.$message.success('添加失败')
                }
            })
        },
        //提交基本信息 使用防抖 
        fordata: debounce(function () {
            // 拼接地址
            this.formDatapor.j_address = this.selectedOptions.join(" ");
            // 检查是否有空值
            const hasEmptyValues = Object.values(this.formDatapor).some(value => !value);
            if (hasEmptyValues) {
                this.$message.warning('请填写所有必填字段。');
                return; // 如果有空值，阻止提交
            }

            this.isSubmitting = true; // 设置为正在提交

            inserting(this.formDatapor)
                .then(response => {
                    console.log("返回", response);
                    this.expertext = response; // 专家ID
                    this.$message.success('提交成功'); // 提交成功后的提示
                })
                .catch(error => {
                    console.error("错误", error);
                    this.$message.error('插入过程中出现错误');
                })
                .finally(() => {
                    this.isSubmitting = false; // 重置提交状态
                });

            console.log("soaksoaksoa", this.formDatapor);
            console.log("sdds", this.formData);
        }, 1000), // 1000 毫秒内只允许提交一次
        // 查询任职经验数据
        queryExperienceData() {
            const params = {
                jid:this.expertext
            };
            selectlist01(params).then(response => {
                this.tablell = response; // 将返回的数据设置到表格中
                console.log('Experience',params);
                console.log("Experience查询", response.data);
            }).catch(error => {
                console.error("获取数据失败:", error);
            });
        },
        // 查询教育经历数据
        queryAddeducateData(){
            const params = {
                jid:this.expertext
            };
            
            selectlist02(params).then(response => {
                this.tablecc = response; // 将返回的数据设置到表格中
                console.log('educate',params);
                console.log("educate查询", response.data);
            }).catch(error => {
                console.error("获取数据失败:", error);
            });
        },
        //查询培训经历数据
        queryAddtrainingData(){
            const params = {
                jid:this.expertext
            };
            selectlist03(params).then(response => {
                this.tabledd = response; // 将返回的数据设置到表格中
                console.log('training',params);
                console.log("training查询", response.data);
            }).catch(error => {
                console.error("获取数据失败:", error);
            });
        },
        //查询职业资格数据
        queryAddoccupationData(){
            const params = {
                jid:this.expertext
            };
            selectlist04(params).then(response => {
                this.tableee = response; // 将返回的数据设置到表格中
                console.log('occupation',params);
                console.log("occupation", response.data);
            }).catch(error => {
                console.error("获取数据失败:", error);
            });
        },
        //查询职称信息数据
        queryAddjobData(){
            const params = {
                jid:this.expertext
            };
            selectlist05(params).then(response => {
                this.tableff = response; // 将返回的数据设置到表格中
                console.log('occupation',params);
                console.log("occupation", response.data);
            }).catch(error => {
                console.error("获取数据失败:", error);
            });
        },
        //监测
        handleChange() {

        },
        //删除文件
        handleRemoveFile(file) {
            removeFile(file.name).then(res => {
                if (res.data == 1) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                }
                const index = this.formData.fileList.findIndex(f => f.name === file.name);
                this.formData.fileList.splice(index, 1); // 从 fileList 中移除一个元素，从 index 位置开始
                console.log(this.formData.fileList, "1231231");

            })
        },
        //文件上传前的校验
        uploadFileFun(file) {
            var test = /(doc|docx|pdf|txt|png)$/.test(file.name.split('.').pop().toLowerCase());
            if (!test) {
                this.$message.error("请上传正确的文档格式!");
                return false;
            }
            const isLt2M = file.size / 1024 / 1024 < 10;
            if (!isLt2M) {
                this.$message.error("上传文件大小不能超过 10MB!");
                return false;
            }
        },
        uploadDeviceFile(file) {
            // 创建formdata实例
            let formData = new window.FormData();
            // 将获取的文件通过append方法加入实例中
            formData.append("file", file.file);
            //发送axios请求
            uplodaBudgetFile(formData)
                .then(res => {
                    // 拿到后端响应的文件名称反显到列表的form
                    const fileInfo = {
                        name: res.data.name,
                        url: res.data.url,
                        size: res.data.size,
                        uid: file.file.uid,
                    };
                    this.formDatapor.j_identity_photo = res.data.url;
                    this.formData.fileList.push(fileInfo); // 直接添加文件名字符串                    
                })
                .catch(err => {
                    console.error('上传文件失败:', err);
                });
        },
        uploadDeviceFilepor(file) {
            // 创建formdata实例
            let formData = new window.FormData();
            // 将获取的文件通过append方法加入实例中
            formData.append("file", file.file);
            //发送axios请求
            uplodaBudgetFile(formData)
                .then(res => {
                    // 拿到后端响应的文件名称反显到列表的form
                    const fileInfo = {
                        name: res.data.name,
                        url: res.data.url,
                        size: res.data.size,
                        uid: file.file.uid,
                    };
                    this.formDatapor.j_documents_photo = res.data.url;
                    this.formData.fileLists.push(fileInfo); // 直接添加文件名字符串                    
                })
                .catch(err => {
                    console.error('上传文件失败:', err);
                });
        },
        // addExperience() {
        //     // 这里可以根据需要进行数据验证
        //     if (this.validateExperience(this.newExperience)) {
        //         this.table01.push({ ...this.newExperience }); // 将新数据添加到表格数据中
        //         this.closeDialog(); // 关闭对话框
        //     } else {
        //         this.$message.error('请填写所有必填项！');
        //     }
        // },
        //关闭任职经历页面
        closeDialog() {
            this.dialogVisible = false; // 关闭对话框
        },
        //关闭添加教育页面
        closeDiaopop() {
            this.dialogopop = false; // 打开对话框
        },
        //关闭添加培训页面
        closeDiaop() {
            this.dialogop = false;
        },
        //关闭职业资格页面
        closeDiaopas() {
            this.dialogopsd = false;
        },
        //关闭职业信息页面
        closeDiaujas() {
            this.dialogoppoiu = false;
        },
        resetNewExperience() {
            this.newExperience = { // 重置表单数据
                unit: '',
                time: '',
                specialized: '',
                q_office: ''
            };
        },
        // 打开职业资格对话框
        openmmDiapl() {
            this.dialogopsd = true;
        },
        // 打开任职经历对话框
        openAddDialog() {
            this.dialogVisible = true;
            this.resetNewExperience(); // 重置新经验对象
        },
        // 打开教育对话框
        openAddDiats() {
            this.dialogopop = true;
        },
        // 打开培训对话框
        openmmDiats() {
            this.dialogop = true;
        },
        openmmnnmnm() {
            this.dialogoppoiu = true;
        },
        validateExperience(experience) {
            // 检查对象的必填字段是否都被填写
            return experience.unit && experience.time && experience.specialized && experience.q_office;
        },
        handleClick(tab, event) {
            console.log(tab, event);
        }
    }
};
</script>
<style scope>
.button-container {
    margin-left: 40%;
    display: flex;
    /* 使用 Flexbox 来排列按钮 */
    gap: 15px;
    /* 设置按钮间隔为 15px */
}

.button-container01 {
    margin-top: 50px;
    margin-left: 30%;
    display: flex;
    /* 使用 Flexbox 来排列按钮 */
    gap: 15px;
    /* 设置按钮间隔为 15px */
}

/* 自定义级联选择器样式 */
.custom-cascader .el-cascader {
    border: none !important;
    /* 取消边框 */
    box-shadow: none !important;
    /* 取消阴影 */
}

button {
    padding: 5px 15px;
    border-radius: 5px;
    border-color: rgb(241, 241, 241);
    font-size: 14px;
    /* 设置字体大小 */
}

.next {
    background-color: red;
    /* 下一个按钮的背景色为红色 */
    color: white;
    /* 字体颜色为白色 */
}

.next01 {
    background-color: rgb(178, 177, 177);
    /* 下一个按钮的背景色为红色 */
    color: white;
    /* 字体颜色为白色 */
}

.submit,
.save {
    background-color: rgb(79, 79, 201);
    /* 提交和保存按钮的背景色为蓝色 */
    color: white;
    /* 字体颜色为白色 */
}

.cancel {
    background-color: white;
    /* 取消按钮的背景色为白色 */
    color: black;
    /* 字体颜色为黑色 */
    border: 1px solid black;
    /* 可选：设置黑色边框 */
}

.border {
    border: none !important;
    box-shadow: none !important;
    /* 防止阴影 */
    outline: none;
    /* 去掉点击时的外边框 */
}

a {
    color: red;
}

.xx table tr {
    height: 51.5px;
}

.xx {
    width: 78%;
    position: absolute;
    left: 180px;
    top: 6px;
}

.xx01 table tr {
    height: 51.5px;
}

.xx01 {
    width: 78%;
    position: absolute;
    left: 180px;
    top: 332px;
}

.xx02 table tr {
    height: 51.5px;
}

.xx02 {
    width: 78%;
    position: absolute;
    left: 180px;
    top: 452px;
}

.tt table tr {
    height: 50px;
}

.tt01 table tr {
    height: 50px;
}

.tt02 table tr {
    height: 50px;
}

.tt {
    width: 85%;
    position: absolute;
    left: 760px;
    top: 6px;
}

.tt01 {
    width: 85%;
    position: absolute;
    left: 760px;
    top: 329px;
}

.tt02 {
    width: 78%;
    position: absolute;
    left: 758px;
    top: 453px;
}

.custom-divider {
    width: 98%;
    /* 设置分隔线的长度 */
    margin-top: 5px;
}

.app-container {
    display: flex;
    /* 使用 Flexbox */
    justify-content: left;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    height: 35px;
    /* 容器高度为 35px */
}

.jbxx {
    font-weight: bold;
    /* 加粗 */
    font-size: 14px;
    /* 字体大小 */
    margin-left: 30px;
}

.jc {
    width: 180px;
    height: 260px;
    background-color: rgb(231, 231, 231);
    text-align: center;
    margin-top: 5px;
}

.jc01 {
    width: 180px;
    height: 52px;
    background-color: rgb(231, 231, 231);
    display: flex;
    /* 使用 Flexbox */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    margin-top: 5px;
}

.jc02 {
    width: 180px;
    height: 52px;
    background-color: rgb(231, 231, 231);
    display: flex;
    /* 使用 Flexbox */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    margin-top: 5px;
}

.jc span {
    margin-top: 14px;
    margin-bottom: 15px;
    /* 这里的值可以根据需求调整 */
    display: inline-block;
    /* 使 margin 生效 */
}

.jcr01 {
    width: 180px;
    height: 52px;
    background-color: rgb(231, 231, 231);
    display: flex;
    /* 使用 Flexbox */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    position: absolute;
    left: 580px;
    top: 329px;
}

.jcr02 {
    width: 180px;
    height: 52px;
    background-color: rgb(231, 231, 231);
    display: flex;
    /* 使用 Flexbox */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    position: absolute;
    left: 580px;
    top: 453px;
}

.jcr {
    width: 180px;
    height: 260px;
    background-color: rgb(231, 231, 231);
    text-align: center;
    position: absolute;
    left: 580px;
    top: 6px;
}

.jcr span {
    margin-top: 17px;
    margin-bottom: 14px;
    /* 这里的值可以根据需求调整 */
    display: inline-block;
    /* 使 margin 生效 */
}

table {
    border-collapse: collapse;
    /* 合并边框 */
    width: 40%;
    /* 表格宽度 */
}

td {
    border: 1px solid #f2f2f2;
    /* 设置单元格的边框颜色 */
    padding: 8px;
    /* 内边距 */
    text-align: left;
    /* 左对齐 */
    background-color: #fff;
    /* 单元格背景颜色 */
}

tr:nth-child(even) {
    background-color: #f2f2f2;
    /* 隔行变色 */
}
</style>